﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="DataModel.aspx.cs" Inherits="ControlExplorer.C1EventsCalendar.DataModel" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1EventsCalendar"
	TagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
    <style type="text/css">
        .top-pane
        {
            margin: 1em 0;
            padding: 1em;
        }
        .calendaractions p, 
        .addnewevent, .events-title
        {
            margin-bottom: 1em;
        }
        #eventscalendar
        {
            width: 750px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<wijmo:C1EventsCalendar runat="server" ID="C1EventsCalendar1" Width="100%"  Height="475px"
 OnClientInitialized="initialized" HeaderBarVisible="false" ></wijmo:C1EventsCalendar>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ControlOptions" runat="server">

                <div class="top-pane ui-helper-clearfix ui-widget-content ui-corner-all">
                    <div class="calendaractions">
                        <h3 class="events-title">
                            事件</h3>
                        <div class="eventactions">
                            <a class="addnewevent" href="#">使用对话框添加事件</a>&nbsp;&nbsp;
							<a class="addneweventwithoutdialog" href="#">不使用对话框添加事件</a>&nbsp;&nbsp;
							<a class="deleteEventsForActiveDay" href="#">删除活跃天的所有事件（没有确认环节）</a>
                        </div>
                        <h3>
                            日历</h3>
                        <div class="calendarslist-container">
                            <ul class="calendarslist">
                                <li>载入中...</li>
                            </ul>
                        </div>
                        <p>
                            <a class="calendarsettings">编辑</a> <a class="deletecalendar">删除</a>
                        </p>
                        <p>
                            <a class="addnewcalendar">添加日历</a>
                        </p>
                    </div>
                </div>
    <script type="text/javascript">
    	function initialized(e) {
    		// load available calendars when widget is initialized
    		loadCalendarsList();
    	}
    	function calendarsChanged(e, args) {
    		// load available calendars when calendars option has been changed
    		loadCalendarsList();
    	}
    	function getEvCal() {
    		return $("#<%= C1EventsCalendar1.ClientID%>");
    	}
    	function onAddNewEventClick() {
    		getEvCal().c1eventscalendar("showEditEventDialog");
    	}
    	function onAddNewEventWithoutDialogClick() {
    		var o = {};
    		o.subject = "New event";
    		o.start = new Date();
    		o.end = new Date(o.start.getTime() + 1000 * 60 * 60 * 2); // duration 2 hours
    		getEvCal().c1eventscalendar("addEvent", o);
    	}
    	function onDeleteEventsForActiveDayClick() {
    		var now = new Date(),
					selectedDate = getEvCal().c1eventscalendar("option", "selectedDate"),
    				start = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()),
					end = new Date(start.getTime() + 1000 * 60 * 60 * 24),
					events, i;
    		events = getEvCal().c1eventscalendar("getOccurrences", start, end);
    		
    		for (i = 0; i < events.length; i++) {
    			getEvCal().c1eventscalendar("deleteEvent", events[i]);
    		}

    	}

    	function onAddNewCalendarClick() {
    		getEvCal().c1eventscalendar("showEditCalendarDialog");
    	}
    	function onEditCalendarClick() {
    		if ($(".calendarslist").find(".ui-selected").length > 0) {
    			var checkbox = $(".calendarslist").find(".ui-selected").find("input")[0];
    			getEvCal().c1eventscalendar("showEditCalendarDialog", checkbox.value);
    		}
    	}
    	function onDeleteCalendarClick() {
    		if ($(".calendarslist").find(".ui-selected").length > 0) {
    			var checkbox = $(".calendarslist").find(".ui-selected").find("input")[0];
    			getEvCal().c1eventscalendar("deleteCalendar", checkbox.value);
    		}
    	}
    	function loadCalendarsList() {
    		var calendars = getEvCal().c1eventscalendar("option", "calendars"),
					i, c, calendarslist = $(".calendarslist");
    		calendarslist.html("");
    		for (i = 0, c = calendars.length; i < c; i += 1) {
    			calendarslist.append("<li class=\"ui-widget-content\"><label><input type=\"checkbox\" value=\"" + calendars[i].name + "\" />" + calendars[i].name + "</label></li>");
    		}
    		$(".calendaractions .calendarsettings").button("option", "disabled", true);
    		$(".calendaractions .deletecalendar").button("option", "disabled", true);
    	}

    	$(document).ready(function () {
    		$(".eventactions .addnewevent")/*.button()*/
					.click($.proxy(onAddNewEventClick, this));
    		$(".eventactions .addneweventwithoutdialog")/*.button()*/
					.click($.proxy(onAddNewEventWithoutDialogClick, this));
    		$(".eventactions .deleteEventsForActiveDay")/*.button()*/
					.click($.proxy(onDeleteEventsForActiveDayClick, this));
    		//

    		$(".calendaractions .addnewcalendar").button()
							.click($.proxy(onAddNewCalendarClick, this));
    		$(".calendaractions .calendarsettings").button({ disabled: true })
							.click($.proxy(onEditCalendarClick, this));
    		$(".calendaractions .deletecalendar").button({ disabled: true })
							.click($.proxy(onDeleteCalendarClick, this));

    		$(".calendarslist").selectable({
    			selected: function (event, ui) {
    				if ($(".calendarslist").find(".ui-selected").length > 0) {
    					$(".calendaractions .deletecalendar").button("option", "disabled", false);
    					if ($(".calendarslist").find(".ui-selected").length === 1) {
    						$(".calendaractions .calendarsettings").button("option", "disabled", false);
    					} else {
    						$(".calendaractions .calendarsettings").button("option", "disabled", true);
    					}
    				}
    			},
    			unselected: function (event, ui) {
    				if ($(".calendarslist").find(".ui-selected").length === 1) {
    					$(".calendaractions .calendarsettings").button("option", "disabled", false);
    				} else if ($(".calendarslist").find(".ui-selected").length < 1) {
    					$(".calendaractions .calendarsettings").button("option", "disabled", true);
    					$(".calendaractions .deletecalendar").button("option", "disabled", true);
    				}
    			}
    		});

    		$(".calendarslist").find("input").live("change", function () {
    			var checkboxes = $(".calendarslist").find("input"), i,
					visibleCalendars = [];
    			for (i = 0; i < checkboxes.length; i++) {
    				if (checkboxes[i].checked) {
    					visibleCalendars.push(checkboxes[i].value);
    				}
    			}
    			getEvCal().c1eventscalendar("option", "visibleCalendars", visibleCalendars);
    		});

    	});
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="Description" runat="server">
                <p>
                    此示例展示了如何使用客户端脚本来编辑事件。
                </p>
			<p>示例中使用的选项:</p>
			<ul>
				<li><strong>calendars</strong> - 可用的日历对象数组。这个选项是只读的。</li>
				<li><strong>selectedDate</strong> - 选中的日期。</li>
				<li><strong>visibleCalendars</strong> - 名称需要被显示的日历数组。</li>			
			</ul>
			<p>在示例中被使用的客户端行为:</p>
			<ul>
				<li><strong>getOccurrences</strong> - 检索指定时间间隔的包含完整列表事件对象的数组。注意，这种方法也会为重复出现的事件创建实例。</li>
				<li><strong>addEvent</strong> - 把新事件添加到一个数据源。</li>
				<li><strong>deleteEvent</strong> - 从数据源中删除事件。</li>			
				<li><strong>deleteCalendar</strong> - 从数据源中删除已经存在的日历。</li>			
				<li><strong>showEditEventDialog</strong> - 为了显示“编辑事件”对话框所需要调用的方法。</li>
				<li><strong>showEditCalendarDialog</strong> - 为了显示“编辑日历”对话框所需要调用的方法。</li>								
			</ul>
			<p>
	
			</p>
</asp:Content>
